import QtQuick 2.0

//Rectangle {
//    width: 360
//    height: 360
//    color: "#00000000"
//    smooth: true
//    visible: true
//    clip: true
//    z: 2147483646
//    //opacity: 1

    Image {
        id: image1
        x: 0
        y: 0
        width: 360
        height: 360
        z: 2147483646
        source: "D-Pad.png"
        property string vDIRECTION: "";
        signal dPadClicked(string direct)

//        Timer{
//            id:timer
//            interval:100; running: false; repeat:true
//            onTriggered: image1.dPadClicked(vDIRECTION)
//        }

        Rectangle {
            id: dPadLeft
            y: parent.height / 3
            width: parent.width / 3
            height: image1.height / 3
            radius: 20
            gradient: Gradient {
                GradientStop {
                    position: 0
                    color: "#ffffff"
                }

                GradientStop {
                    position: 1
                    color: "#1500ff"
                }
            }
            opacity: maLeft.containsMouse ? 0.5 : 0

            MouseArea {
                id: maLeft
                anchors.fill: parent
                hoverEnabled: true
                scale: 1.2
                onPressed: {vDIRECTION = "left"; timer.running = true;}
                onReleased: {timer.running = false;}
            }
        }

        Rectangle {
            id: dPadUp
            x: parent.width / 3
            width: parent.width / 3
            height: image1.height / 3
            radius: 20
            rotation: 180
            gradient: Gradient {
                GradientStop {
                    position: 0
                    color: "#ffffff"
                }

                GradientStop {
                    position: 1
                    color: "#0004ff"
                }
            }
            scale: 1
            opacity: maUp.containsMouse ? 0.5 : 0

            MouseArea {
                id: maUp
                anchors.fill: parent
                scale: 1.2
                hoverEnabled: true
                onPressed: {vDIRECTION = "up"; timer.running = true;}
                onReleased: {timer.running = false;}
            }
        }

        Rectangle {
            id: dPadRight
            x: parent.width * 2/3
            y: parent.height /3
            height: parent.height/3
            width: parent.width/3
            radius: 20
            gradient: Gradient {
                GradientStop {
                    position: 0
                    color: "#ffffff"
                }

                GradientStop {
                    position: 1
                    color: "#0004ff"
                }
            }
            opacity: maRight.containsMouse ? 0.5 : 0
            scale: 1

            MouseArea {
                id: maRight
                anchors.fill: parent
                clip: true
                transformOrigin: Item.Center 
                hoverEnabled: true
                scale: 1.2
                onPressed: {vDIRECTION = "right"; timer.running = true;}
                onReleased: {timer.running = false;}
            }
        }

        Rectangle {
            id: dPadDown
            x: parent.width / 3
            y: parent.height * 2/3
            height: parent.height / 3
            width: parent.width / 3
            radius: 20
            gradient: Gradient {
                GradientStop {
                    position: 0
                    color: "#ffffff"
                }

                GradientStop {
                    position: 1
                    color: "#2600ff"
                }
            }
            opacity: maDown.containsMouse ? 0.5 : 0

            MouseArea {
                id: maDown
                anchors.fill: parent
                scale: 1.2
                hoverEnabled: true
                onPressed: {vDIRECTION = "down"; timer.running = true;}
                onReleased: {timer.running = false;}
            }
        }

        Rectangle {
            id: dPadStop
            radius: 20
            opacity: maStop.containsMouse ? 0.5 : 0
            x: parent.width /3
            y: parent.height /3
            height: parent.height / 3
            color: "#ad1313"
            width: parent.width / 3

            MouseArea {
                id: maStop
                anchors.fill: parent
                opacity: 1
                hoverEnabled: true
                scale: 1.2
                onPressed: {vDIRECTION = "stop"; timer.running = true;}
                onReleased: {timer.running = false;}
            }
        }
    }

//}

